<%--
  Created by IntelliJ IDEA.
  User: kzhou
  Date: 2015/4/20
  Time: 16:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="${ctx}/static/images/logo_ico.ico">

    <title>沈阳情报合成研判平台</title>

    <link href="${ctx}/static/css/style.css" rel="stylesheet">
    <link href="${ctx}/static/css/style-responsive.css" rel="stylesheet">
    <style>
        * {
            font-family: "微软雅黑";
        }

        @font-face {
            font-family: "iconfont";
            src: url('${ctx}/static/css/iconfont.eot?t=1476716734');
            src: url('${ctx}/static/css/iconfont.eot?t=1476716734#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('${ctx}/static/css/iconfont.woff?t=1476716734') format('woff'), /* chrome, firefox */ url('${ctx}/static/css/iconfont.ttf?t=1476716734') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('${ctx}/static/css/iconfont.svg?t=1476716734#iconfont') format('svg');/* IE9*/
            /* iOS 4.1- */
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
        }

        .icon-tishi:before {
            content: "\e614";
        }

        .icon-guanbi:before {
            content: "\e604";
        }

        .icon-tuxiangchulileiiconshuchu01:before {
            content: "\e653";
        }

        .icon-cuowu:before {
            content: "\e622";
        }
        html, body {
            width: 100%;
            height: 100%;
            font-family: "微软雅黑";
            font-size: 14px;
            color: #fff;
            margin: 0;
            padding: 0;
        }

        body {
            background: url(${ctx}/static/images/bg2.jpg) no-repeat top center;
            background-size: 100% 100%;
        }

        #name {
            position: absolute;
            width: 600px;
            text-align: center;
            left: 50%;
            top: 20%;
            margin-left: -30px;
            font-size: 42px;
            color: #ddc878;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.4), 10px 10px 20px rgba(0, 0, 0, 0.5);
        }

        #foot {
            position: absolute;
            width: 100%;
            text-align: center;
            bottom: 30px;
            left: 0;
        }

        #loginBox {
            position: absolute;
            width: 400px;
            height: 320px;
            background: rgba(0, 0, 0, 0.4);
            left: 50%;
            margin-left: 72px;
            top: 32%;
            border-radius: 5px;
            box-sizing: border-box;
            padding-top: 40px;
        }
        #loginBox .inputBox {
            height: 40px;
            width: 300px;
            margin: 0 auto;
            position: relative;
            margin-bottom: 20px;
        }
        #loginBox .inputBox .icon {
            font-size: 20px;
            position: absolute;
            left: 10px;
            top: 10px;
        }
        #loginBox .inputBox .input {
            width: 100%;
            height: 100%;
            display: block;
            outline: none;
            border: none;
            border-bottom: 1px solid #ddd;
            background: inherit;
            font-size: 16px;
            color: #fff;
            text-indent: 40px;
        }
        #loginBox .inputBox img {
            display: block;
            width: 49%;
            height: 100%;
            position: absolute;
            right: 0;
            bottom: 6px;
            cursor: pointer;
        }
        #loginBox .inputBox .heng {
            position: absolute;
            width: 0;
            height: 2px;
            left: 0;
            bottom: -4px;
            background: #0175e2;
            transition: all .3s ease;
        }
        #loginBox .btn {
            display: block;
            width: 300px;
            height: 45px;
            outline: none;
            border: none;
            background: #0175e2;
            color: #fff;
            font-size: 16px;
            margin: 26px auto;
            cursor: pointer;
            border-radius: 3px;
        }
        #loginBox .btn:hover {
            background: #238df0;
        }
        #loginBox .btn:active {
            background: #196ebd;
        }

        .zAlert {
            margin: 0;
            padding: 0;
            border: none;
            font-size: 14px;
            color: #333;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.1);
            z-index: 9999;
            font-family: "微软雅黑";
            display: none;
        }

        .zAlert .daoling {
            width: 440px;
            background: #fff;
            border-radius: 3px;
            position: absolute;
            left: 50%;
            top: 14%;
            overflow: hidden;
            margin-left: -220px;
            opacity: 1;
            margin-top: 100px;
            -webkit-transition: all .1s linear;
            -moz-transition: all .1s linear;
            -ms-transition: all .1s linear;
            transition: all .1s linear;
        }

        .zAlert .daoling .head {
            width: 100%;
            height: 45px;
            background: #5bc0de;
            line-height: 45px;
            color: #fff;
            text-indent: .8em;
        }

        .zAlert .daoling .head .close-icon {
            float: right;
            margin-right: 15px;
            cursor: pointer;
            color: #f7f7f7;
        }

        .zAlert .daoling .head .close-icon:hover {
            color: #dddddd;
        }

        .zAlert .daoling .body {
            box-sizing: border-box;
            width: 100%;
            padding: 15px;
            line-height: 20px;
        }

        .zAlert .daoling .foot {
            box-sizing: border-box;
            width: 100%;
            padding: 8px;
            height: 50px;
            border-top: 1px solid #efefef;
        }

        .zAlert .daoling .foot .zAlBtn-ok {
            border: none;
            outline: none;
            padding: 8px 15px;
            color: #fff;
            background: #5bc0de;
            border-radius: 3px;
            display: block;
            margin: 0 auto;
            font-size: 14px;
            cursor: pointer;
        }

        .zAlert .daoling .foot .zAlBtn-ok:hover {
            background: #53b4d1;
        }

        .zAlert .daoling .foot .zAlBtn-ok:active {
            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1) inset;
        }

        .top-hide {
            -webkit-transform: translate(0, -100px);
            -moz-transform: translate(0, -100px);
            -ms-transform: translate(0, -100px);
            transform: translate(0, -100px);
            opacity: 0 !important;
        }

        #zAlertBox{
            position: fixed;
            width: 500px;
            min-height: 50px;
            background: rgba(0,0,0,.5);
            border-radius: 3px;
            top:18%;
            left: 50%;
            margin-left: -250px;
            line-height: 30px;
            color: #fff;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            margin-top: 14px;
            font-size: 16px;
            z-index: 100;

            opacity: 1;
            -webkit-transition: all .1s linear;
            -moz-transition: all .1s linear;
            -ms-transition: all .1s linear;
            transition: all .1s linear;
        }
        #zAlertBox span{
            margin-left: 10px;
            font-size: 16px;
        }
    </style>
</head>

<div id="name">
    沈阳情报合成研判平台
</div>

<div id="loginBox">
    <form action="">
        <div class="inputBox">
            <i class="fa fa-user icon"></i>
            <input type="text" class="input" id="loginName" name="loginName" placeholder="用户名" autofocus/>
            <div class="heng"></div>
        </div>
        <div class="inputBox">
            <i class="fa fa-lock icon" style="font-size: 21px;"></i>
            <input type="password" class="input" id="loginPwd" name="loginPwd" placeholder="密码"/>
            <div class="heng"></div>
        </div>
        <div class="inputBox">
            <i class="fa fa-picture-o icon" style="font-size: 15px;top: 13px;"></i>
            <input type="text" class="input" id="j_code" name="j_code" placeholder="验证码" maxlength="4" style="float: left;"/>
            <div class="heng"></div>
            <img id="randImg" src="${ctx}/validateCodeServlet" alt="验证码" onclick="refresh();" title="看不清？点击更换"/>
        </div>
        <button class="btn" type="button" id="btn_login">
            <i class="fa fa-sign-in"></i> 登录
        </button>
    </form>
</div>

<div id="alertCofirm"></div>

<div class="zAlert">
    <div class="daoling top-hide">
        <div class="head">
            <i class="iconfont">&#xe614;</i>
            <span></span>
            <i class="iconfont close-icon">&#xe622</i>
        </div>
        <div class="body">

        </div>
        <div class="foot">
            <button type="button" class="zAlBtn-ok"><i class="iconfont">&#xe653</i> 确定</button>
        </div>
    </div>
</div>
<div id="zAlertBox" class=" top-hide">
    <i class="iconfont">&#xe614;</i>
    <span></span>
</div>

<script src="${ctx}/static/js/jquery.min.js"></script>
<script src="${ctx}/static/js/bootstrap.min.js"></script>
<script src="${ctx}/static/js/modernizr.min.js"></script>


<script>
    $(function () {
        $("#j_code").keydown(function (envet) {
            if(envet.keyCode == 13){
                $('#btn_login').trigger('click');
            }
        });


        $('#btn_login').click(function () {
            if ($('#loginName').val() == false) {
                zAlert('用户名不能为空')
                return false;
            }else if ($('#loginPwd').val() == false) {
                zAlert('密码不能为空')
                return false;
            } else if ($('#j_code').val() == false) {
                zAlert('验证码不能为空')
                return false;
            } else {
                $.ajax({
                    url: "${ctx}/account/loginSub",
                    type: 'post',
                    data: {
                        loginName: $('#loginName').val(),
                        loginPwd: $('#loginPwd').val(),
                        j_code: $('#j_code').val()
                    },
                    success: function (data) {
                        if (data.success) {
                            document.cookie="zUrl=#/account/toMainInit";
                            window.location.href="${ctx}/account/toMain";
                        } else {
                            zAlert(data.msg);
                        }
                    }
                })
            }



        });

    });

    // 重新加载验证码
    function refresh() {
        var o = document.getElementById("randImg");
        var timenow = new Date().getTime();
        o.src = "${ctx}/validateCodeServlet?d=" + timenow;
        setTimeout(function () {
            o.src = "${ctx}/validateCodeServlet?d=" + timenow;
        }, 20);
    }

    // zAlert
    $(".zAlert .close-icon").on('click', function () {
        zAlertHide();
    });
    $('.zAlert .zAlBtn-ok').on('click', function () {
        zAlertHide();
    });
    function zAlertHide() {
        $(".zAlert").find('.daoling').addClass('top-hide');
        setTimeout(function () {
            $(".zAlert").fadeOut(100);
        })
        $('button').blur();
        zAlertValue = false;
        return zAlertValue;
    }
    ;
    function zAlertShow() {
        $(".zAlert").fadeIn(100);
        setTimeout(function () {
            $(".zAlert").find('.daoling').removeClass('top-hide');
        })
        zAlertValue = true;
        return zAlertValue;
    }
    ;
//    function zAlert(a, b) {
//        $(".zAlert .body").text(a);
//        if (b) {
//            $(".zAlert .head span").text(b);
//        } else {
//            $(".zAlert .head span").text('信息提示');
//        }
//        zAlertShow();
//    }
//    ;

    function zAlert(a){
        if($('#zAlertBox').hasClass('top-hide')){
            $('#zAlertBox span').text(a);
            $('#zAlertBox').removeClass('top-hide');

            setTimeout(function () {
                $('#zAlertBox').addClass('top-hide');
            },2500);
        }
    }


    $('.zAlert').on('click', function () {
        zAlertHide();
    });
    $('.zAlert .daoling').on('click', function (e) {
        e.stopPropagation();
    });

    // zAlert

</script>
</body>
</html>

